<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{common/base-css.html::htmlhead}"></div>
    <title>首页</title>
</head>
<body>
<div class="am-tabs" id="doc-my-tabs">
    <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
        <li class="am-active"><a href="">彩虹</a></li>
        <li><a href="">画面</a></li>
        <li><a href="">窗外</a></li>
    </ul>
    <div class="am-tabs-bd">
        <div class="am-tab-panel am-active">...</div>
        <div class="am-tab-panel">...</div>
        <div class="am-tab-panel">...</div>
    </div>
</div>

<div class="am-slider am-slider-default">
    <ul class="am-slides">
        <li>...</li>
    </ul>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="add">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">角色新增
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-body am-fr">
                                <form class="am-form tpl-form-border-form tpl-form-border-br" id="actionForm">
                                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-form-group">
                                        <label for="roleName" class="am-u-sm-3 am-form-label">角色名</label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="roleName" name="roleName"
                                                   data-validation-message="角色名有误" required>
                                        </div>
                                    </div>

                                    <div class="am-u-sm-12 am-form-group">
                                        <label for="desc" class="am-u-sm-3 am-form-label">角色描述 </label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input" id="desc" name="desc"
                                                   data-validation-message="角色描述有误" required>
                                        </div>
                                    </div>

                                    <div class="am-u-sm-12 am-form-group">
                                        <label for="desc" class="am-u-sm-3 am-form-label">开始时间 </label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input am-form-field" id="startTime"
                                                   data-validation-message="开始时间有误" required>
                                        </div>
                                    </div>

                                    <div class="am-u-sm-12 am-form-group">
                                        <label for="desc" class="am-u-sm-3 am-form-label">结束时间 </label>
                                        <div class="am-u-sm-9">
                                            <input type="text" class="tpl-form-input am-form-field" id="endTime"
                                                   data-validation-message="结束时间有误" required>
                                        </div>
                                    </div>
                                    <button type="button" class="am-btn am-btn-primary" onclick="save(this)">
                                        提交
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{common/base-js.html::javascriptHtml}"></div>
<script type="application/javascript">
    $.fn.datetimepicker.dates['zh-CN'] = {
        days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        today: "今天",
        suffix: [],
        meridiem: ["上午", "下午"]
    };

    $(function () {
        $('#doc-my-tabs').tabs();
        $('.am-slider').flexslider({
            // options
        });
        $('.am-modal').modal('toggle');
        $('#startTime').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language:  'zh-CN'
        }).on('changeDate', function(ev){
            $('#endTime').datetimepicker('setStartDate', ev.date);
        });
        $('#endTime').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language:  'zh-CN'
        }).on('changeDate', function(ev){
            $('#startTime').datetimepicker('setEndDate', ev.date);
        });
    })


</script>
</body>
</html>